.videoBox{width:100%;margin:0 auto;position:relative;overflow:hidden}
.videoBox video{width:100%;display:block;background:#000}
.videoBox .playKey{width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-40px 0px 0px -20px;background:rgba(0,0,0,0.5);border-radius:50%;cursor:pointer;transition:all ease 0.5s}
.videoBox .playKey p{display:block;width:0px;height:0px;border:10px solid transparent;border-left-color:#FFF;position:absolute;left:17px;top:50%;margin-top:-10px;}
.videoBox .goPlay{opacity:0;visibility:hidden;transform:scale(1.5);}
.video-controls{width:100%;height:50px;position:absolute;bottom:0px;left:0px;z-index:10;background:rgba(0,0,0,0.5);transition:all .5s}
.video-controls .video-progress{width:100%;height:6px;position:relative;margin-bottom:0px;z-index:1;background:rgba(255,255,255,0.5)}
.video-controls .bufferBar{width:0%;height:100%;position:absolute;left:0px;top:0%;background:rgba(255,255,255,0.25);z-index:0;}
.video-controls .progressBar{width:100%;height:100%;position:relative;z-index:5;cursor:pointer}
.video-controls .timeBar{width:0%;height:100%;position:absolute;left:0%;top:0;background:#FFF}
.video-controls .lineBar{height:100%;width:100%;position:relative;z-index:5;}
.video-controls .dragBtn{width:10px;height:10px;position:absolute;left:0px;top:50%;margin-top:-5px;border-radius:50%;-webkit-border-radius:50%;background:#FFF;box-sizing:border-box;visibility:hidden} 
.video-controls .progressBar:hover .dragBtn,.video-controls .dragShow{display:block;visibility:visible}
.video-controls .media-control{width:100%;height:44px;position:relative;}
.video-controls .media-play-pause{width:32px;height:100%;float:left;position:relative;cursor:pointer;margin-left:1px;opacity:.8;transition:all .5s} 
.video-controls .media-play-pause p{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px;}
.video-controls .media-play-pause .play-key:after{content:"";display:block;border:7px solid transparent;border-left-color:#FFF;position:absolute;top:50%;left:50%;margin-top:-7px;margin-left:-3px;}
.video-controls .media-play-pause .pause-key{display:none}
.video-controls .media-play-pause .pause-key:before,.video-controls .media-play-pause .pause-key:after{content:"";display:block;width:3px;height:12px;background:#FFF;position:absolute;top:50%;left:50%;margin-top:-6px;}
.video-controls .media-play-pause .pause-key:before{margin-left:-3px;}
.video-controls .media-play-pause .pause-key:after{margin-left:3px;}
.video-controls .isPlay .play-key{display:none}
.video-controls .isPlay .pause-key{display:block}
.video-controls .playTime{float:left;margin-left:5px;line-height:44px;color:#FFF;font-size:14px;cursor:default;user-select:none;}
.video-controls .playTime em,.video-controls .playTime i{display:inline-block;}
.video-controls .playTime i{margin:0 5px;}
.video-controls .rightBtn{float:right;margin-right:1px;height:100%;position:relative}
.video-controls .volumeBox{float:left;margin-right:2px;height:100%;position:relative;z-index:10;}
.video-controls .volIocn{width:30px;height:100%;position:relative;cursor:pointer;opacity:0.8;transition:all .5s;}
.video-controls .volIocn p{display:block;width:100%;height:100%;position:relative;}
.video-controls .volIocn p:before{content:"";display:block;border:3px solid transparent;border-left-color:#FFF;position:absolute;top:50%;left:16px;margin-top:-3px;}
.video-controls .volIocn p:after{content:"";display:block;width:18px;height:18px;border:2px solid transparent;border-right-color:#FFF;border-radius:50%;-webkit-border-radius:50%;position:absolute;left:0px;top:50%;margin-top:-11px;}
.video-controls .volIocn i{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px;}
.video-controls .volIocn i:before{content:"";display:block;border:7px solid transparent;border-right-color:#FFF;position:absolute;top:50%;left:0px;margin-top:-7px;}
.video-controls .volIocn i:after{content:"";display:block;width:4px;height:6px;position:absolute;top:50%;left:6px;margin-top:-3px;background:#FFF}
.video-controls .volIocn b{display:none;width:18px;height:18px;position:absolute;top:50%;right:1px;margin-top:-9px}
.video-controls .volIocn b:before{content:"";display:block;width:10px;height:2px;position:absolute;top:50%;left:50%;margin:-1px 0 0 -5px;background:#FFF;transform:rotate(45deg)}
.video-controls .volIocn b:after{content:"";display:block;width:10px;height:2px;position:absolute;top:50%;left:50%;margin:-1px 0 0 -5px;background:#FFF;transform:rotate(-45deg)}
.video-controls .volMuted p{display:none}
.video-controls .volMuted b{display:block}
.video-controls .volLine{width:100%;height:70px;position:absolute;left:0px;bottom:33px;background:rgba(0,0,0,0.7);cursor:pointer;visibility:hidden;opacity:0;transition:all .5s;}
.video-controls .volRim{width:4px;height:60px;position:absolute;bottom:0px;left:13px;background:rgba(255,255,255,0.5)}
.video-controls .volumeBar{width:100%;height:50px;position:absolute;left:0px;bottom:0px;background:#FFF;}
.video-controls .volumeBtn{width:100%;height:0px;position:absolute;left:0;bottom:50px;background:#c7000a}
.video-controls .volhand{width:10px;height:10px;position:absolute;left:50%;bottom:-5px;margin-left:-5px;border-radius:50%;-webkit-border-radius:50%;background:#FFF;display:none}
.video-controls .volRim:hover .volhand,.video-controls .volRim .volhand-on{display:block}
.video-controls .fullBtn{float:right;width:30px;height:100%;position:relative;cursor:pointer;opacity:0.8;transition:all .5s;}
.video-controls .fullBtn p,.video-controls .fullBtn i{display:block;width:14px;height:14px;position:absolute;top:50%;left:50%;margin-top:-7px;margin-left:-7px;}
.video-controls .fullBtn p:before,.video-controls .fullBtn p:after,.video-controls .fullBtn i:before,.video-controls .fullBtn i:after{content:"";display:block;width:3px;height:3px;position:absolute;}
.video-controls .full-open p:after{top:0px;left:0px;border-left:2px solid #FFF;border-top:2px solid #FFF}
.video-controls .full-open p:before{top:0px;right:0px;border-right:2px solid #FFF;border-top:2px solid #FFF}
.video-controls .full-open i:after{bottom:0px;left:0px;border-left:2px solid #FFF;border-bottom:2px solid #FFF}
.video-controls .full-open i:before{bottom:0px;right:0px;border-right:2px solid #FFF;border-bottom:2px solid #FFF}
.video-controls .full-close p:after{top:0px;left:0px;border-right:2px solid #FFF;border-bottom:2px solid #FFF}
.video-controls .full-close p:before{top:0px;right:0px;border-left:2px solid #FFF;border-bottom:2px solid #FFF}
.video-controls .full-close i:after{bottom:0px;left:0px;border-right:2px solid #FFF;border-top:2px solid #FFF}
.video-controls .full-close i:before{bottom:0px;right:0px;border-left:2px solid #FFF;border-top:2px solid #FFF}  
.video-controls .playBtn:hover,.video-controls .volumeBox:hover .volIocn,.video-controls .fullBtn:hover{opacity:1}
.video-controls .volumeBox:hover .volLine{visibility:visible;opacity:1}
.controls-hide .video-controls{bottom:-44px}
.videoBox:-webkit-full-screen{width:100%;height:100%;}
.videoBox:-moz-full-screen{width:100%;height:100%;}